import { Card, Col, Row, Segmented, Space, Tag } from 'antd';
import React, { useEffect, useState } from 'react';
import styles from "./index.module.scss";
import { BarChartOutlined } from '@ant-design/icons';

const CardsList: React.FC = () => {
    const [cards, setCards] = useState<any>([]);
    const [currentSeg, setCurrentSeg] = useState<string>("全部");

    useEffect(() => {
        const all = [
            { title: "一类", list: ["1", "2", "3", "4"] },
            { title: "二类", list: ["1", "2", "3", "4"] },
            { title: "三类", list: ["1", "2", "3", "4"] }
        ];
        if (currentSeg == "全部") {
            setCards(all);
        } else {
            const t = all.filter((el: any) => el.title === currentSeg);
            setCards(t)
        }
    }, [currentSeg])

    return (
        <div className={`container ${styles.container}`}>
            <Segmented<string>
                options={['全部', '一类', '二类', '三类']}
                onChange={(value) => {
                    setCurrentSeg(value)
                }}
            />
            <div>
                {
                    cards.map((item: any) => {
                        return <Space style={{ display: "block" }} key={item.title}>
                            <div style={{ padding: "10px 0" }}>
                                {item.title}
                            </div>
                            <Row gutter={[10, 10]}>
                                {
                                    item.list.map((i: any) => {
                                        return <Col span={8} key={i}>
                                            <Card
                                                title={<><BarChartOutlined style={{ color: "rgb(222, 67, 7)", fontSize: "24px" }} />{`卡片${i}`}</>}
                                                extra={<Tag bordered={false} color="processing">生效中</Tag>}
                                            >
                                                {`卡片${i}内容`}
                                            </Card>
                                        </Col>
                                    })
                                }
                            </Row>
                        </Space>
                    })
                }
            </div>
        </div>
    )
}

export default CardsList;